<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        .top{
            text-align: center;
            background: #d2ddea;
            padding: 60px 0;
        }
        .center{
            width: 1100px;
            margin: auto;
        }
        #n{
            width: 200px;
            height: 25px;
            margin-right: 50px;
        }
        #s{
            width: 200px;
            height: 31px;
            margin-right: 50px;
        }
        #a{
            width: 200px;
            height: 25px;
            margin-right: 50px;
        }
        #btn{
            width: 169px;
            background: #118cf3;
            border: none;
            color: white;
            height: 30px;
        }
        .tt{
            margin-top: 50px;
        }
        #list li{
            line-height: 50px;
            height: 50px;
            border-bottom: 1px solid #999;
        }
        #list li span{
            display: inline-block;
            margin-right: 260px;
            width: 100px;
        }
        .tt li{
            line-height: 50px;
            height: 50px;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
        }
        .tt li span{
            display: inline-block;
            margin-right: 260px;
            width: 100px;
        }
        .tian p{
            font-size: 30px;
            padding: 10px;
        }
        #list li span{
            font-size: 20px;
            color: #695f5f;
        }
    </style>
</head>
<body>
<div class="top">
    <h1>学员信息表</h1>
    <p>1804</p>
</div>
<div class="center">
    <div class="tian">
        <p>添加</p>
    </div>
    <input type="text" placeholder="姓名" id="n">
    <select id="s">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <input type="number" placeholder="年龄" id="a">
    <button id="btn">添加</button>
    <ul class="tt">
        <li><span>姓名</span><span>性别</span><span>年龄</span></li>
    </ul>
    <ul id="list">

    </ul>
</div>
<script>
    document.querySelector("#btn").addEventListener("click",function () {
        var n = document.querySelector("#n").value;
        console.log(n);
        var s = document.querySelector("#s").value;
        console.log(s);
        var a = document.querySelector("#a").value;
        console.log(a);
            var xmlhttp;
        loadXMLDoc();
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        console.log(xmlhttp.responseText);
                }
            }

            xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=" + n + "&sex=" + s + "&age=" + a, true);
            xmlhttp.send();

    })



    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json = JSON.parse(xmlhttp.responseText);
                console.log(json);
                document.querySelector("#list").innerHTML=""
                for(let i = 0;i<json.data.length;i++){
                    var li = document.createElement("li");
                    var spanName = document.createElement("span");
                    spanName.innerHTML = json.data[i].studentName;
                    var spanSex = document.createElement("span");
                    spanSex.innerHTML = json.data[i].sex;
                    var spanAge = document.createElement("span");
                    spanAge.innerHTML = json.data[i].age;


                    li.appendChild(spanName);
                    li.appendChild(spanSex);
                    li.appendChild(spanAge);

                    document.querySelector("#list").appendChild(li);
                }


                console.log(xmlhttp.responseText);



            }
        }
        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
        xmlhttp.send();
    }
    loadXMLDoc();
</script>
</body>
</html>